<template>
  <div class="content-container" @click="handleContainer">
    <p-tooltip placement="topLeft" :title="value && value.label">
      <p-input
        v-if="isInput && isEdit"
        :value="value.label"
        @change="handleChange"
      />
      <span
        v-else
        class="content ellipsis"
        :style="styleObj"
        @click.stop="handleLink"
      >
        {{ value && value.label }}
      </span>
    </p-tooltip>
    <p-icon
      v-if="isEdit"
      class="icon"
      type="search"
      @click.stop="handleSearch"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String,
      default: '80px',
    },
    isInput: {
      type: Boolean,
      default: false,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    isLink: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    styleObj() {
      if (this.isLink) {
        return {
          color: '#1740DC',
          cursor: 'pointer',
          width: this.width,
        };
      } else {
        return {
          width: this.width,
        };
      }
    },
  },

  methods: {
    handleLink() {
      if (this.isLink) {
        this.handleSearch();
      }
    },

    handleContainer() {
      if (!this.isInput && this.isEdit) {
        this.handleSearch();
      }
    },
    handleChange(e) {
      const val = e.target.value;
      this.$emit('change', { key: val, label: val });
    },
    handleSearch() {
      this.$emit('search');
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  width: 100%;
  display: flex;
  align-items: center;
  .content {
    margin-right: auto;
  }
  .icon {
    margin-left: 8px;
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
}
</style>
